<template>
    <el-submenu :index="data.route">
        <template slot="title">
            <i :class="data , $route.path | transIcon" />
            <span>{{ data.name }}</span>
        </template>
        
        <el-menu-item :index="child.route" :key="child.route" v-for="child in data.children">
            <i :class="child,$route.meta | transIcon" />
            <span slot="title" :class="{active: child.route === activeIndex}">{{ child.name }}</span>
        </el-menu-item>
    </el-submenu>
</template>

<script>
    import MenuItem from './menu-item'

    export default {
        name: 'SubMenu',
        filters: {
            transIcon({
                route,
                iconClass
            }, routeMeta) {
                return routeMeta[0].url + routeMeta[1].url === route ? `${iconClass}-active` : iconClass
            },
        },
        props: {
            data: {
                type: Object,
                default () {
                    return {}
                },
            },
        },
        data() {
            return {
                activeIndex: '',
            }
        },
        components: {
            MenuItem
        },
        mounted() {
            this.activeIndex = this.$route.path;
        },
        methods: {},
        watch: {
            $route(val) {
                let pathArr = val.path.split('/');
                this.activeIndex = `/${pathArr[1]}`;
            }
        }
    }
</script>

<style scoped>
    .active {
        color: #FF8A00;
    }
</style>
